<template>
	<el-row class="roleList">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1">管理员设置 -</p>
				<p>&nbsp;角色列表</p>
			</div>
			<button><i class="el-icon-refresh-right"></i></button>
		</div>
		<hr>
		
		<button class="btn">添加角色</button>
		
		<el-table :data="tableData" :cell-style="{textAlign:'center'}" :header-cell-style="{textAlign:'center'}" border
			style="width: 100%; margin-top: 20px;">
			<el-table-column prop="num" label="序号">
			</el-table-column>
		
			<el-table-column prop="name" label="角色名称">
			</el-table-column>
		
			<el-table-column prop="phone" label="操作员数量">
			</el-table-column>
		
			<el-table-column prop="type" label="状态">
				<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-table-column>
		
			<el-table-column prop="adm" label="管理" class="adm">
				<div style="display: flex;">
					<el-button class="btnSet"><i class="el-icon-edit"></i> 编辑</el-button>
					<el-button class="btnDel"><i class="el-icon-delete"></i> 删除</el-button>
				</div>
		
			</el-table-column>
		</el-table>
		
	</el-row>
</template>

<script>
	export default {
		name:'RoleList',
		data() {
			return {
				value: true,
				tableData: [{
					num: '1',
					name: '王小虎',
					phone: '1233443',
					number: '18138154347',
					role: '超级算',
					type: '',
					adm: ''
				}]
		
			}
		}
	}
</script>

<style scoped>
	.roleList {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}
	
	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
	}
	
	.div1-1 {
		display: flex;
	}
	
	.div1-1-p1 {
		color: #a49fa7;
	}
	
	.div1 button {
		background-color: #189F92;
		border: none;
		width: 55px;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
	}
	
	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}
	
	.roleList hr {
		border: 1px gainsboro solid;
	}
	
	.btn {
		color: white;
		background-color: #189F92;
		border: none;
		width: 130px;
		padding: 15px 0px;
		margin-top: 10px;
		border-radius: 3px;
	}
	.btnDel {
		background-color: #1dc6b5;
		color: white;
		border: none;
		height: 35px;
		width: 80px;
		margin-left: 12px;
		border-radius: 3px;
	}
	
	.btnSet {
		background-color: skyblue;
		color: white;
		border: none;
		height: 35px;
		width: 80px;
		margin-left: 10px;
		border-radius: 3px;
	}
</style>
